<template>
  <div class="rescue-sidebar">
    <!-- 救助案例导航 -->
    <div class="left_nav" id="categories">
      <h2 class="left_h2">救助案例</h2>
      <ul class="left_nav_ul" id="firstpane">
        <li>
          <router-link 
            to="/rescue-cases/dogs" 
            class="biglink"
            :class="{ curr: activeCategory === 'dogs' }"
          >
            犬类
          </router-link>
        </li>
        <li>
          <router-link 
            to="/rescue-cases/cats" 
            class="biglink"
            :class="{ curr: activeCategory === 'cats' }"
          >
            猫类
          </router-link>
        </li>
        <li>
          <router-link 
            to="/rescue-cases/others" 
            class="biglink"
            :class="{ curr: activeCategory === 'others' }"
          >
            其他
          </router-link>
        </li>
      </ul>
    </div>

    <!-- 搜索框 -->
    <form id="searchform" @submit.prevent="handleSearch">
      <div class="input-group search_group">
        <input 
          type="text" 
          v-model="searchKeyword"
          name="keyword" 
          class="form-control input-sm" 
          placeholder="信息查询"
        >
        <span class="input-group-btn">
          <button 
            @click="handleSearch" 
            class="btn btn-sm mysearch_btn" 
            type="button"
          >
            搜 索
          </button>
        </span>
      </div>
    </form>

    <!-- 养宠知识 -->
    <div class="left_news">
      <h2 class="left_h2">养宠知识</h2>
      <li>
        <a href="javascript:void(0)" @click.prevent title="猫为什么会炸毛">
          猫为什么会炸毛
        </a>
        <span class="news_time">04/22</span>
      </li>
    </div>

    <!-- 联系我们 -->
    <div class="left_contact">
      <h2 class="left_h2" style="margin-bottom:20px;">联系我们</h2>
      <p>联系人：贫僧</p>
      <p>手机：暂无</p>
      <p>电话：暂无</p>
      <p>邮箱：暂无</p>
      <p>地址： 暂无</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RescueSidebar',
  props: {
    activeCategory: {
      type: String,
      default: 'dogs'
    }
  },
  data() {
    return {
      searchKeyword: ''
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim()) {
        console.log('搜索关键词:', this.searchKeyword)
        // 这里后续可以实现搜索功能
      }
    }
  }
}
</script>

<style scoped>
.rescue-sidebar {
  padding-top: 20px;
}

.left_nav {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.left_h2 {
  color: #04A07B;
  border-left: 4px solid #04A07B;
  padding-left: 15px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.left_nav_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_nav_ul li {
  margin-bottom: 10px;
}

.biglink {
  display: block;
  padding: 12px 15px;
  color: #666;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.biglink:hover,
.biglink.curr {
  background-color: #04A07B;
  color: white;
  text-decoration: none;
}

.search_group {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.search_group input {
  border-radius: 4px 0 0 4px;
}

.mysearch_btn {
  background-color: #04A07B;
  color: white;
  border: 1px solid #04A07B;
  border-radius: 0 4px 4px 0;
  padding: 6px 15px;
}

.mysearch_btn:hover {
  background-color: #038a6b;
  border-color: #038a6b;
}

.left_news {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.left_news li {
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left_news li:last-child {
  border-bottom: none;
}

.left_news a {
  color: #666;
  text-decoration: none;
  flex: 1;
}

.left_news a:hover {
  color: #04A07B;
}

.news_time {
  color: #999;
  font-size: 12px;
}

.left_contact {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.left_contact p {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

@media (max-width: 768px) {
  .rescue-sidebar {
    margin-top: 30px;
  }
}
</style>
